<!DOCTYPE html>
<html lang="en" class="">

<head>
  <!-- Required meta tags always come first -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Material Design Bootstrap Template</title>

  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
  <!-- Bootstrap core CSS -->
  <link href="../css/bootstrap.min.css" rel="stylesheet">
  <!-- Material Design Bootstrap -->
  <link href="../css/mdb.min.css" rel="stylesheet">

  <style>

    html,
        body,
        header,
        .jarallax {
          height: 700px;
        }

        @media (max-width: 740px) {
          html,
          body,
          header,
          .jarallax {
            height: 100vh;
          }
        }

        @media (min-width: 800px) and (max-width: 850px) {
          html,
          body,
          header,
          .jarallax {
            height: 100vh;
          }
        }

        @media (min-width: 560px) and (max-width: 650px) {
          header .jarallax h5 {
            margin-bottom: 1.5rem !important;
          }
        }

        .top-nav-collapse {
            background-color: #6f7782 !important;
        }
        .navbar:not(.top-nav-collapse) {
            background: transparent !important;
        }
        @media (max-width: 768px) {
            .navbar:not(.top-nav-collapse) {
                background: #6f7782 !important;
            }
        }
        @media (min-width: 800px) and (max-width: 850px) {
            .navbar:not(.top-nav-collapse) {
                background: #6f7782!important;
            }
        }
        h1 {
            letter-spacing: 8px;
        }
        h5 {
            letter-spacing: 3px;
        }
        .hr-light {
            border-top: 3px solid #fff;
            width: 80px;
        }
        footer.page-footer {
            background-color: #6f7782;
        }

        @media (max-width: 450px) {
            .btn-floating {
                margin-left: 0;
                margin-right: 0;
            }
        }

    </style>

</head>

<body>


  <!--Main Navigation-->
  <header>

    <!--Navbar-->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
      <div class="container">
        <a class="navbar-brand" href="#"><strong>MDB</strong></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7"
          aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent-7">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Profile</a>
            </li>
          </ul>
          <form class="form-inline">
            <div class="md-form my-0">
              <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            </div>
          </form>
        </div>
      </div>
    </nav>

    <!-- Intro Section -->
    <div class="view jarallax" data-jarallax='{"speed": 0.2}' style="background-image: url(https://mdbootstrap.com/img/Photos/Others/img%20%2848%29.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center;">
      <div class="mask rgba-black-light">
        <div class="container h-100 d-flex justify-content-center align-items-center">
          <div class="row pt-5 mt-3">
            <div class="col-md-12">
              <div class="text-center">
                <h1 class="h1-reponsive white-text text-uppercase font-weight-bold mb-3 wow fadeInDown" data-wow-delay="0.3s"><strong>welcome
                    to my blog</strong></h1>
                <hr class="hr-light mt-4 wow fadeInDown" data-wow-delay="0.4s">
                <h5 class="text-uppercase mb-5 white-text wow fadeInDown" data-wow-delay="0.4s"><strong>Photography &
                    design</strong></h5>
                <a class="btn btn-outline-white wow fadeInDown" data-wow-delay="0.4s">portfolio</a>
                <a class="btn btn-outline-white wow fadeInDown" data-wow-delay="0.4s">About me</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </header>
  <!--Main Navigation-->


  <!--Main Layout-->
  <main>

    <div class="container">

      <!--Section: Blog v.3-->
      <section class="section extra-margins pb-3 text-center text-lg-left wow fadeIn" data-wow-delay="0.3s">

        <!--Section heading-->
        <h2 class="font-weight-bold text-center h1 my-5">Recent posts</h2>
        <!--Section description-->
        <p class="text-center grey-text mb-5 mx-auto w-responsive">Duis aute irure dolor in reprehenderit in voluptate
          velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.</p>

        <!--Grid row-->
        <div class="row">

          <!--Grid column-->
          <div class="col-lg-4 mb-4">
            <!--Featured image-->
            <div class="view overlay z-depth-1">
              <img src="https://mdbootstrap.com/img/Photos/Others/img (38).jpg" class="img-fluid" alt="First sample image">
              <a>
                <div class="mask rgba-white-slight"></div>
              </a>
            </div>
          </div>
          <!--Grid column-->

          <!--Grid column-->
          <div class="col-lg-7 mb-4">
            <!--Excerpt-->
            <a href="" class="teal-text">
              <h6 class="pb-1"><i class="fas fa-heart"></i><strong> Lifestyle </strong></h6>
            </a>
            <h4 class="mb-4"><strong>This is title of the news</strong></h4>
            <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime
              placeat facere possimus, omnis voluptas assumenda est, omnis dolor.</p>
            <p>by <a><strong>Jessica Clark</strong></a>, 26/08/2016</p>
            <a class="btn btn-primary">Read more</a>
          </div>
          <!--Grid column-->

        </div>
        <!--Grid row-->

        <hr class="mb-5">

        <!--Grid row-->
        <div class="row mt-3">

          <!--Grid column-->
          <div class="col-lg-4 mb-4">
            <!--Featured image-->
            <div class="view overlay z-depth-1">
              <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Second sample image">
              <a>
                <div class="mask rgba-white-slight"></div>
              </a>
            </div>
          </div>
          <!--Grid column-->

          <!--Grid column-->
          <div class="col-lg-7 mb-4">
            <!--Excerpt-->
            <a href="" class="cyan-text">
              <h6 class="pb-1"><i class="fas fa-plane"></i><strong> Travels</strong></h6>
            </a>
            <h4 class="mb-4"><strong>This is title of the news</strong></h4>
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
              deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati.</p>
            <p>by <a><strong>Jessica Clark</strong></a>, 24/08/2016</p>
            <a class="btn btn-primary">Read more</a>
          </div>
          <!--Grid column-->

        </div>
        <!--Grid row-->

        <hr class="mb-5">

        <!--Grid row-->
        <div class="row">

          <!--Grid column-->
          <div class="col-lg-4 mb-4">
            <!--Featured image-->
            <div class="view overlay z-depth-1">
              <img src="https://mdbootstrap.com/img/Photos/Others/img (35).jpg" class="img-fluid" alt="Third sample image">
              <a>
                <div class="mask rgba-white-slight"></div>
              </a>
            </div>
          </div>
          <!--Grid column-->

          <!--Grid column-->
          <div class="col-lg-7 mb-4">
            <!--Excerpt-->
            <a href="" class="brown-text">
              <h6 class="pb-1"><i class="fas fa-camera"></i><strong> Photography</strong></h6>
            </a>
            <h4 class="mb-4"><strong>This is title of the news</strong></h4>
            <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
              dolores eos qui ratione voluptatem sequi nesciunt.</p>
            <p>by <a><strong>Jessica Clark</strong></a>, 21/08/2016</p>
            <a class="btn btn-primary">Read more</a>
          </div>
          <!--Grid column-->

        </div>
        <!--Grid row-->

        <hr class="mb-5">

        <!--Grid row-->
        <div class="row">

          <!--Grid column-->
          <div class="col-lg-4 mb-4">
            <!--Featured image-->
            <div class="view overlay z-depth-1">
              <img src="https://mdbootstrap.com/img/Photos/Others/img (39).jpg" class="img-fluid" alt="Third sample image">
              <a>
                <div class="mask rgba-white-slight"></div>
              </a>
            </div>
          </div>
          <!--Grid column-->

          <!--Grid column-->
          <div class="col-lg-7 mb-4">
            <!--Excerpt-->
            <a href="" class="red-text">
              <h6 class="pb-1"><i class="fas fa-heart"></i><strong> Lifestyle</strong></h6>
            </a>
            <h4 class="mb-4"><strong>This is title of the news</strong></h4>
            <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
              dolores eos qui ratione voluptatem sequi nesciunt.</p>
            <p>by <a><strong>Jessica Clark</strong></a>, 21/08/2016</p>
            <a class="btn btn-primary">Read more</a>
          </div>
          <!--Grid column-->

        </div>
        <!--Grid row-->

        <!--Pagination dark-->
        <nav class="wow fadeIn mb-4 mt-5" data-wow-delay="0.4s" style="visibility: visible; animation-delay: 0.4s; animation-name: fadeIn;">
          <ul class="pagination pg-dark flex-center">
            <!--Arrow left-->
            <li class="page-item">
              <a class="page-link waves-effect waves-effect" aria-label="Previous">
                <span aria-hidden="true">«</span>
                <span class="sr-only">Previous</span>
              </a>
            </li>

            <!--Numbers-->
            <li class="page-item active"><a class="page-link waves-effect waves-effect">1</a></li>
            <li class="page-item"><a class="page-link waves-effect waves-effect">2</a></li>
            <li class="page-item"><a class="page-link waves-effect waves-effect">3</a></li>
            <li class="page-item"><a class="page-link waves-effect waves-effect">4</a></li>
            <li class="page-item"><a class="page-link waves-effect waves-effect">5</a></li>

            <!--Arrow right-->
            <li class="page-item">
              <a class="page-link waves-effect waves-effect" aria-label="Next">
                <span aria-hidden="true">»</span>
                <span class="sr-only">Next</span>
              </a>
            </li>
          </ul>
        </nav>
        <!--/Pagination dark-->

      </section>
      <!--Section: Blog v.3-->

      <hr class="mb-5">

      <!--Section: Blog v.2-->
      <section class="section extra-margins text-center pb-3 wow fadeIn" data-wow-delay="0.3s">

        <!--Section heading-->
        <h2 class="font-weight-bold text-center h1 my-5">Older posts</h2>
        <!--Section description-->
        <p class="text-center grey-text mb-5 mx-auto w-responsive">Duis aute irure dolor in reprehenderit in voluptate
          velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.</p>

        <!--Grid row-->
        <div class="row">

          <!--Grid column-->
          <div class="col-lg-4 col-md-12 mb-4">
            <!--Featured image-->
            <div class="view overlay z-depth-1 mb-2">
              <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(131).jpg" class="img-fluid"
                alt="First sample image">
              <a>
                <div class="mask rgba-white-slight"></div>
              </a>
            </div>

            <!--Excerpt-->
            <a href="" class="pink-text">
              <h6 class="mb-3 mt-3"><i class="fas fa-map "></i><strong> Adventure</strong></h6>
            </a>
            <h4 class="mb-3 font-weight-bold">This is title of the news</h4>
            <p>by <a><strong>Billy Forester</strong></a>, 15/07/2016</p>
            <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime
              placeat facere possimus voluptas.</p>
            <a class="btn btn-primary">Read more</a>
          </div>
          <!--Grid column-->

          <!--Grid column-->
          <div class="col-lg-4 col-md-6 mb-4">
            <!--Featured image-->
            <div class="view overlay z-depth-1 mb-2">
              <img src="https://mdbootstrap.com/img/Photos/Others/img6.jpg" class="img-fluid" alt="Second sample image">
              <a>
                <div class="mask rgba-white-slight"></div>
              </a>
            </div>

            <!--Excerpt-->
            <a href="" class="indigo-text">
              <h6 class="mb-3 mt-3"><i class="fas fa-graduation-cap"></i><strong> Education</strong></h6>
            </a>
            <h4 class="mb-3 font-weight-bold">This is title of the news</h4>
            <p>by <a><strong>Billy Forester</strong></a>, 12/07/2016</p>
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
              deleniti atque corrupti quos dolores.</p>
            <a class="btn btn-primary">Read more</a>
          </div>
          <!--Grid column-->

          <!--Grid column-->
          <div class="col-lg-4 col-md-6 mb-4">
            <!--Featured image-->
            <div class="view overlay z-depth-1 mb-2">
              <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(33).jpg" class="img-fluid"
                alt="Thrid sample image">
              <a>
                <div class="mask rgba-white-slight"></div>
              </a>
            </div>

            <!--Excerpt-->
            <a href="" class="cyan-text">
              <h6 class="mb-3 mt-3"><i class="fas fa-fire "></i><strong> Culture</strong></h6>
            </a>
            <h4 class="mb-3 font-weight-bold">This is title of the news</h4>
            <p>by <a><strong>Billy Forester</strong></a>, 10/07/2016</p>
            <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, quia consequuntur magni
              dolores eos qui ratione voluptatem.</p>
            <a class="btn btn-primary">Read more</a>
          </div>
          <!--Grid column-->

        </div>
        <!--Grid row-->

      </section>
      <!--Section: Blog v.2-->

    </div>

  </main>
  <!--Main Layout-->


  <!--Footer-->
  <footer class="page-footer pt-4 mt-4   text-center text-md-left">

    <!--Footer Links-->
    <div class="container">
      <div class="row">

        <!--First column-->
        <div class="col-md-3">
          <h5 class="text-uppercase font-weight-bold">About author </h5>
          <p>Here you can use rows and columns here to organize your footer content.</p>
        </div>
        <!--/.First column-->

        <hr class="w-100 clearfix d-md-none">

        <!--Second column-->
        <div class="col-md-2 ml-auto">
          <h5 class="text-uppercase font-weight-bold">Links</h5>
          <ul class="list-unstyled">
            <li><a href="#!">Link 1</a></li>
            <li><a href="#!">Link 2</a></li>
            <li><a href="#!">Link 3</a></li>
            <li><a href="#!">Link 4</a></li>
          </ul>
        </div>
        <!--/.Second column-->

        <hr class="w-100 clearfix d-md-none">

        <!--Third column-->
        <div class="col-md-2 ml-auto">
          <h5 class="text-uppercase font-weight-bold">Links</h5>
          <ul class="list-unstyled">
            <li><a href="#!">Link 1</a></li>
            <li><a href="#!">Link 2</a></li>
            <li><a href="#!">Link 3</a></li>
            <li><a href="#!">Link 4</a></li>
          </ul>
        </div>
        <!--/.Third column-->

        <hr class="w-100 clearfix d-md-none">

        <!--Fourth column-->
        <div class="col-md-2 ml-auto">
          <h5 class="text-uppercase font-weight-bold">Links</h5>
          <ul class="list-unstyled">
            <li><a href="#!">Link 1</a></li>
            <li><a href="#!">Link 2</a></li>
            <li><a href="#!">Link 3</a></li>
            <li><a href="#!">Link 4</a></li>
          </ul>
        </div>
        <!--/.Fourth column-->

      </div>
    </div>
    <!--/.Footer Links-->

    <hr>

    <!--Social buttons-->
    <div class="text-center mb-3">

      <a class="btn-floating btn-fb"><i class="fab fa-facebook-f"> </i></a>
      <a class="btn-floating btn-tw"><i class="fab fa-twitter"> </i></a>
      <a class="btn-floating btn-gplus"><i class="fab fa-google-plus-g"> </i></a>
      <a class="btn-floating btn-li"><i class="fab fa-linkedin-in"> </i></a>
      <a class="btn-floating btn-dribbble"><i class="fab fa-dribbble"> </i></a>

    </div>
    <!--/.Social buttons-->

    <!--Copyright-->
    <div class="footer-copyright py-3 text-center">
      <div class="container-fluid">
        © 2015 Copyright: <a href="https://mdbootstrap.com/docs/jquery/"> MDBootstrap.com </a>

      </div>
    </div>
    <!--/.Copyright-->

  </footer>
  <!--/.Footer-->


  <!--  SCRIPTS  -->
  <!-- JQuery -->
  <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
  <!-- Bootstrap tooltips -->
  <script type="text/javascript" src="../js/popper.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script type="text/javascript" src="../js/bootstrap.min.js"></script>
  <!-- MDB core JavaScript -->
  <script type="text/javascript" src="../js/mdb.min.js"></script>
  <script>
    new WOW().init();

  </script>
</body>

</html>
